<template>
    <view class="user-container">
        <!-- 登录弹窗 -->
        <u-popup 
            v-model="showLoginModal" 
            mode="bottom" 
            :border-radius="20"
            :closeable="true"
            @close="closeLoginModal"
        >
            <view class="login-popup">
                <view class="login-header">
                    <text class="login-title">用户登录</text>
                </view>
                
                <view class="login-form">
                    <view class="form-item">
                        <text class="form-label">账号</text>
                        <input 
                            class="form-input" 
                            v-model="loginForm.username" 
                            placeholder="请输入账号"
                            :focus="loginForm.usernameFocus"
                        />
                    </view>
                    
                    <view class="form-item">
                        <text class="form-label">密码</text>
                        <input 
                            class="form-input" 
                            v-model="loginForm.password" 
                            placeholder="请输入密码"
                            password
                            :focus="loginForm.passwordFocus"
                        />
                    </view>
                    
                    <view class="login-actions">
                        <button class="btn btn-cancel" @click="closeLoginModal">取消</button>
                        <button class="btn btn-login" @click="handleLogin">登录</button>
                    </view>
                </view>
            </view>
        </u-popup>
        
        <!-- 用户信息区域 -->
        <view class="user-info">
            <view class="avatar-container">
                <image 
                    class="avatar" 
                    :src="userInfo.avatar || defaultAvatar" 
                    mode="aspectFill"
                />
            </view>
            <view class="user-details">
                <text class="nickname">{{ userInfo.username || '未登录' }}</text>
                <text class="username" v-if="userInfo.username">{{ userInfo.username }}</text>
            </view>
        </view>
        
        <!-- 操作按钮区域 -->
        <view class="action-buttons">
            <button 
                class="btn btn-login" 
                @click="showLogin" 
                v-if="!userInfo.id"
            >
                登录
            </button>
            <button 
                class="btn btn-logout" 
                @click="handleLogout" 
                v-else
            >
                退出登录
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            defaultAvatar: '/static/images/default-avatar.png', // 默认头像
            showLoginModal: false, // 是否显示登录弹窗
            loginForm: {
                username: '',
                password: '',
                usernameFocus: false,
                passwordFocus: false
            }
        };
    },
    
    computed: {
        // 是否已登录
        isLoggedIn() {
            return this.userInfo.id
        }
    },
    
    onShow() {
        this.showLoginModal = false
        this.$store.dispatch('getUserInfo');
    },
    
    methods: {
        // 显示登录弹窗
        showLogin() {
            this.showLoginModal = true;
        },
        
        // 关闭登录弹窗
        closeLoginModal() {
            this.showLoginModal = false;
            this.resetLoginForm();
        },
        
        // 重置登录表单
        resetLoginForm() {
            this.loginForm = {
                username: '',
                password: '',
                usernameFocus: false,
                passwordFocus: false
            };
        },
        
        // 处理登录
        handleLogin() {
            // 表单验证
            if (!this.loginForm.username) {
                uni.showToast({
                    title: '请输入账号',
                    icon: 'none'
                });
                return;
            }
            
            if (!this.loginForm.password) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                });
                return;
            }
            
            // 调用登录API
            this.$api.login({
                username: this.loginForm.username,
                password: this.loginForm.password
            }).then(res => {
                console.log('登录结果:', res);
                if (res) {
                    this.$store.commit('SET_USERINFO', res);
                    this.showLoginModal = false;
                    this.resetLoginForm();
                    
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    });
                }
            }).catch(err => {
                console.error('登录失败:', err);
                uni.showToast({
                    title: '登录失败，请重试',
                    icon: 'none'
                });
            });
        },
        
        // 退出登录
        handleLogout() {
            uni.showModal({
                title: '确认退出',
                content: '确定要退出登录吗？',
                confirmText: '退出',
                confirmColor: '#FF3B30',
                success: (res) => {
                    if (res.confirm) {
                        // 清除用户信息
                        this.$store.commit('LOGOUT');
                        
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success'
                        });
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss">
.user-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
    padding-top: 120rpx;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80rpx;
}

.avatar-container {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 30rpx;
    border: 4rpx solid #f9f9f9;
}

.avatar {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

.user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.nickname {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.username {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
}

.action-buttons {
    width: 100%;
    max-width: 600rpx;
}

.btn {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-login {
    background: #007AFF;
    color: white;
}

.btn-logout {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
}

/* 登录弹窗样式 */
.login-popup {
    background-color: white;
    min-height: 400rpx;
}

.login-header {
    padding: 30rpx;
    text-align: center;
    border-bottom: 1rpx solid #E5E5E5;
}

.login-title {
    color: #333;
    font-size: 32rpx;
    font-weight: bold;
}

.login-form {
    padding: 40rpx 30rpx;
}

.form-item {
    margin-bottom: 30rpx;
}

.form-label {
    display: block;
    color: #333;
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 15rpx;
}

.form-input {
    width: 100%;
    height: 80rpx;
    border: 2rpx solid #E5E5E5;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #FAFAFA;
}

.form-input:focus {
    border-color: #007AFF;
    background-color: white;
}

.login-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
}

.login-actions .btn {
    flex: 1;
    height: 80rpx;
    border-radius: 8rpx;
    font-size: 30rpx;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-actions .btn-cancel {
    background-color: #F5F5F5;
    color: #666;
}

.login-actions .btn-login {
    background-color: #007AFF;
    color: white;
}

.login-actions .btn:active {
    opacity: 0.8;
}

</style>
